<template>
  <div>
    <div class="container">
      <div class="naviga">产品能力分析&nbsp;> <span class="navigaActive">产品大盘</span> </div>
      <div class="mainPage">
        <div class="summaryHeader">
          <span class="lightYellow">{{catagrayCount}}</span>个品类，<span class="lightYellow">{{productCount}}</span>个产品型号，其中<span class="lightYellow">{{onLine}}</span>个型号在售，<span class="lightYellow">{{offLine}}</span>个型号下市
        </div>
        <div class="whitePage">
          <div class="dataCharts">
            <div class="dataChart">
              <div class="detailChart0">{{detailCatagrayCount}}</div>
              <div>品类数（个）</div>
            </div>
            <div class="dataChart">
              <div class="detailChart1">{{detailProductCount}}</div>
              <div>型号数（个）</div>
            </div>
            <div class="dataChart">
              <div class="detailChart2">{{detailOnLine}}</div>
              <div>销售量（万件）</div>
            </div>
            <div class="dataChart">
              <div class="detailChart3">{{detailOffLine}}</div>
              <div>销售额（万元）</div>
            </div>
          </div>
          <div>
            <div class="pickerOption">
              <el-date-picker v-model="dateValue" type="daterange"
                              align="right" unlink-panels range-separator="至"
                              start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
              <div>点我弹出选择</div>
            </div>
          </div>
          <div>
            <el-table :data="results" style="width: 100%">
              <el-table-column
                prop="index"
                label="序号"
                sortable>
              </el-table-column>
              <el-table-column
                prop="type"
                label="产品型号">
              </el-table-column>
              <el-table-column
                prop="name"
                label="产品名称">
              </el-table-column>
              <el-table-column
                prop="type"
                label="所属品类">
              </el-table-column>
              <el-table-column
                sortable
                prop="amount"
                label="销售额">
              </el-table-column>
              <el-table-column
                sortable
                prop="count"
                label="销售量">
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态">
              </el-table-column>
              <el-table-column
                prop="averagePrice"
                label="平均售价">
              </el-table-column>
              <el-table-column
                prop="percentage"
                label="市场占有率">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="dialogVisible = true;fetchData()">销售详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return ({
        catagrayCount: '',
        productCount: '',
        onLine: '',
        offLine: '',
        detailCatagrayCount: '',
        detailProductCount: '',
        detailOnLine: '',
        detailOffLine: '',
        results: [],
        dateValue: {},
      })
    },
    mounted() {
      this.getData()
      this.getProductionAnalysisDetail()
    },
    methods: {
      getData() {
        this.$http.get('/front/marketSale').then(res => {
          this.catagrayCount = res.data.catagrayCount
          this.productCount = res.data.productCount
          this.onLine = res.data.onLine
          this.offLine = res.data.offLine
        })
      },
      getProductionAnalysisDetail(startDate, endDate) {
        this.$http.get('/front/productionAnalysisDetail').then(res => {
          this.detailCatagrayCount = res.data.detailCatagrayCount
          this.detailProductCount = res.data.detailProductCount
          this.detailOnLine = res.data.detailOnLine
          this.detailOffLine = res.data.detailOffLine
          this.results = res.data.results
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .dataCharts {
    display: flex;
    margin: 20px 0;
  }
  .dataChart {
    flex-basis: 25%;
    flex: 1;
    text-align: center;
  }
  .detailChart0 {
    margin: 20px auto;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: 5px solid #F9D277;
    font-size: 26px;
    line-height: 70px;
  }
  .detailChart1 {
    margin: 20px auto;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: 5px solid #94DE76;
    font-size: 26px;
    line-height: 70px;
  }
  .detailChart2 {
    margin: 20px auto;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: 5px solid #4ACDA6;
    font-size: 26px;
    line-height: 70px;
  }
  .detailChart3 {
    margin: 20px auto;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: 5px solid #959BE7;
    font-size: 26px;
    line-height: 70px;
  }
</style>
